// useState是react包提供的一个方法
import React, { useState } from "react";
import { Button } from 'antd-mobile';
import { get } from '../../api/http'

const Counter = () => {
    const [userMsg, setuserMsg] = useState({
        name: '',
        pwd: '',
        isSuccess: false
    })
    return (
        <>
            {
                userMsg.isSuccess ? <button onClick={()=>setuserMsg({...userMsg,isSuccess:false})}>退出登录</button> : <form>
                    用户名：<input type="text" onInput={(e) => setuserMsg({ ...userMsg, name: e.target.value })} />
                    <br />
                    密码：<input type="password" onInput={(e) => setuserMsg({ ...userMsg, pwd: e.target.value })} />
                    <Button onClick={async () => {
                        let res = await get(`http://localhost:3003/data?q=${userMsg.name}`)
                        console.log(res.data)
                        var rs = res.data.filter((item) => {
                            return item.accountNum+'' === userMsg.name
                        })
                        console.log(rs)
                        if (rs.length) {
                            if (rs[0].password+'' === userMsg.pwd) {
                                alert('登录成功')
                                setuserMsg({ ...userMsg, isSuccess: true })
                            } else {
                                alert('密码错误')
                            }
                        } else {
                            alert('该用户不存在')
                        }
                    }
                    }>登录</Button>
                </form>
            }

        </>
    );
};

export default Counter;